<template>
  <div class="app-page" :class="pageClass">
    <div class="app-header">
      <div class="menu">
        <div
          class="menu-item"
          :class="{
            'menu-item--active': item.value == route.path,
          }"
          @click="$router.push(item.value)"
          v-for="item in menus"
        >
          <i :class="`icon iconfont icon-${item.icon}`"></i>
          {{ item.label }}
        </div>
      </div>
      <LLM />
    </div>
    <div class="app-main">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import LLM from './llm/LLM.vue'

const route = useRoute()

const props = defineProps({
  full: Object,
})

const pageClass = computed(() => {
  console.log('props.full', props.full)
  return {
    'app-page--full': props.full,
  }
})

const menus = computed(() => {
  return [
    {
      label: 'AI对话',
      value: '/chat',
      icon: 'ai-chat',
    },
    {
      label: '告警研判',
      value: '/yp',
      icon: 'safety',
    },
  ]
})
</script>
<style lang="scss" scoped>
.app-page {
  background-color: #f5f9fd;

  --primary: #2563eb;
}
.app-header {
  border-bottom: 1px solid rgb(229 231 235 / 0.5);
  height: 56px;
  padding: 0 24px;
  background-color: #fff;
  display: flex;
  align-items: center;
}

.menu {
  display: flex;
  align-items: center;
  flex: 1;
}

.menu-item {
  padding: 0 16px;
  height: 36px;
  line-height: 36px;
  border-radius: 36px;
  margin-right: 12px;
  cursor: pointer;

  .icon {
    margin-right: 4px;
    font-size: 14px;
  }

  &:hover {
    background-color: #f3f4f6;
  }
}

.menu-item--active {
  background-color: var(--primary);
  color: #fff;
  font-weight: 500;
  &:hover {
    color: #fff;
    background-color: var(--primary);
  }
}

.app-main {
  padding: 24px;
}

.app-page--full {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .app-main {
    flex: 1;
    overflow: hidden;
  }
}
</style>
